<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"></style>
    <script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>JQ AJAX</h1>
    <button id="btn">加载</button>
    <hr>

    <div id="box"></div>


    <script>

    $(function (){
        $('#btn').click(function () {
            // // get()
            // $.get('./php/4.php', function (data) {
            //     console.log(data);
            //     // console.table(data);
            // }, 'json');

            // ajax()   店长推荐!!!
            $.ajax({
                type: 'get',
                url: './php/4.php',
                dataType: 'json',
                // 请求成功
                success: function (data) {
                    // console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        $('<li>').html(data[i].name).appendTo('#box');
                    }
                },
                // 请求失败
                error: function (){
                    alert('AJAX 请求出现错误!');
                }
            });
        });

    });
    
    </script>
</body>
</html>